<template>
  <view class="platform-rules-page">
    <!-- 页面头部 -->
    <view class="rules-header section">
      <view class="header-icon">📋</view>
      <view class="header-title">平台使用规则</view>
      <view class="header-subtitle">请仔细阅读以下规则，确保正确使用平台服务</view>
    </view>

    <!-- 规则导航 -->
    <view class="rules-nav section">
      <scroll-view scroll-x="true" class="nav-scroll">
        <view class="nav-list">
          <view 
            v-for="(nav, index) in ruleNavs" 
            :key="index"
            class="nav-item"
            :class="{ 'active': currentNav === index }"
            @tap="switchNav(index)"
          >
            {{ nav.title }}
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- 规则内容 -->
    <view class="rules-content">
      <view v-for="(rule, index) in currentRules" :key="index" class="rule-section section fade-in">
        <view class="rule-title">{{ rule.title }}</view>
        <view class="rule-content">
          <view v-for="(item, itemIndex) in rule.items" :key="itemIndex" class="rule-item">
            <view v-if="item.subtitle" class="rule-subtitle">{{ item.subtitle }}</view>
            <view class="rule-text" v-html="item.content"></view>
          </view>
        </view>
      </view>
    </view>

    <!-- 同意按钮 -->
    <view class="agree-section">
      <view class="agree-checkbox" @tap="toggleAgree">
        <text class="checkbox-icon" :class="{ 'checked': hasAgreed }">{{ hasAgreed ? '✓' : '' }}</text>
        <text class="checkbox-text">我已阅读并同意以上规则</text>
      </view>
      <button 
        class="agree-btn btn-primary" 
        @tap="confirmAgree"
        :disabled="!hasAgreed"
      >
        确认同意
      </button>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'

const currentNav = ref(0)
const hasAgreed = ref(false)

const ruleNavs = ref([
  { title: '环保袋规则', key: 'bag' },
  { title: '积分规则', key: 'points' },
  { title: '回收规则', key: 'recycle' },
  { title: '商城规则', key: 'mall' }
])

const rulesData = ref({
  bag: [
    {
      title: '一、环保袋申领和使用规则',
      items: [
        {
          subtitle: '（一）环保袋申领方式：',
          content: '会员可以在"袋子派"小程序下单页面申领环保袋，或在我的-环保袋页面申领，确保填写正确的回收地址和电话，由回收员上门提供环保袋。'
        },
        {
          subtitle: '（二）环保袋押金',
          content: '会员申领环保袋，需根据环保袋规格支付一定数额的押金。押金将在退还环保袋后1-3个工作日退回至会员的微信零钱包。申领环保袋后，可循环领取替换空袋。'
        },
        {
          subtitle: '（三）装袋要求',
          content: '鼓励纸箱压扁后再装袋。泡沫、大件电器等不适合装袋的物品，请单独放置。'
        }
      ]
    }
  ],
  points: [
    {
      title: '二、积分获取和使用规则',
      items: [
        {
          subtitle: '（一）积分获取方式：',
          content: '1. 完成回收订单可获得积分奖励<br/>2. 新用户注册赠送100积分<br/>3. 每日签到可获得10-50积分<br/>4. 邀请好友注册可获得200积分<br/>5. 参与平台活动可获得额外积分'
        },
        {
          subtitle: '（二）积分使用规则：',
          content: '1. 积分可在商城兑换商品和优惠券<br/>2. 积分不可转让给其他用户<br/>3. 积分有效期为获得后12个月<br/>4. 账户注销后积分自动清零'
        },
        {
          subtitle: '（三）积分计算标准：',
          content: '回收物品按重量和类别计算积分，具体标准请参考回收价格表。特殊活动期间可能有积分加倍等优惠。'
        }
      ]
    }
  ],
  recycle: [
    {
      title: '三、回收服务规则',
      items: [
        {
          subtitle: '（一）回收物品范围：',
          content: '1. 纸类：废纸、纸箱、书籍、报纸等<br/>2. 塑料：塑料瓶、塑料袋、塑料制品等<br/>3. 金属：易拉罐、废铁、铜制品等<br/>4. 电器：手机、电脑、家电等<br/>5. 其他：玻璃制品、纺织品等'
        },
        {
          subtitle: '（二）不回收物品：',
          content: '1. 有毒有害物品<br/>2. 易燃易爆物品<br/>3. 医疗废物<br/>4. 食物残渣<br/>5. 严重污染的物品'
        },
        {
          subtitle: '（三）服务时间：',
          content: '回收服务时间为每日9:00-18:00，节假日正常服务。紧急回收需求可联系客服安排。'
        }
      ]
    }
  ],
  mall: [
    {
      title: '四、积分商城规则',
      items: [
        {
          subtitle: '（一）商品兑换：',
          content: '1. 所有商品均需使用积分兑换<br/>2. 兑换成功后不支持退换<br/>3. 虚拟商品（优惠券等）即时到账<br/>4. 实物商品将在3-7个工作日内发货'
        },
        {
          subtitle: '（二）库存管理：',
          content: '商城商品库存有限，按兑换顺序发放。库存不足时将暂停兑换，补货后恢复。'
        },
        {
          subtitle: '（三）配送说明：',
          content: '实物商品免费配送到指定地址，请确保收货信息准确。配送范围覆盖全国主要城市。'
        }
      ]
    }
  ]
})

const currentRules = computed(() => {
  const navKey = ruleNavs.value[currentNav.value].key
  return rulesData.value[navKey] || []
})

const switchNav = (index) => {
  currentNav.value = index
}

const toggleAgree = () => {
  hasAgreed.value = !hasAgreed.value
}

const confirmAgree = () => {
  if (!hasAgreed.value) {
    uni.showToast({
      title: '请先同意平台规则',
      icon: 'none'
    })
    return
  }

  uni.showToast({
    title: '感谢您的同意！',
    icon: 'success'
  })

  setTimeout(() => {
    uni.navigateBack()
  }, 1500)
}

onMounted(() => {
  console.log('平台规则页面加载完成')
})
</script>

<style lang="scss" scoped>
.platform-rules-page {
  min-height: 100vh;
  background: var(--bg-color);
  padding-bottom: 200rpx;
}

.rules-header {
  text-align: center;
  padding: 48rpx 32rpx;
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
  color: white;
  margin: 0;
  border-radius: 0 0 32rpx 32rpx;
}

.header-icon {
  font-size: 80rpx;
  margin-bottom: 16rpx;
}

.header-title {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 12rpx;
}

.header-subtitle {
  font-size: 26rpx;
  opacity: 0.9;
  line-height: 1.4;
}

.rules-nav {
  padding: 0;
  margin-bottom: 24rpx;
}

.nav-scroll {
  white-space: nowrap;
}

.nav-list {
  display: flex;
  padding: 0 32rpx;
}

.nav-item {
  flex-shrink: 0;
  padding: 16rpx 32rpx;
  margin-right: 16rpx;
  background: white;
  border: 2rpx solid var(--border-color);
  border-radius: 50rpx;
  font-size: 28rpx;
  color: var(--text-light);
  transition: all 0.3s ease;
  
  &.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
    font-weight: 600;
  }
}

.rules-content {
  padding: 0 32rpx;
}

.rule-section {
  padding: 32rpx;
  margin-bottom: 24rpx;
}

.rule-title {
  font-size: 32rpx;
  font-weight: bold;
  color: var(--text-color);
  margin-bottom: 24rpx;
  padding-bottom: 16rpx;
  border-bottom: 2rpx solid var(--border-color);
}

.rule-item {
  margin-bottom: 24rpx;
}

.rule-subtitle {
  font-size: 30rpx;
  font-weight: 600;
  color: var(--primary-color);
  margin-bottom: 12rpx;
}

.rule-text {
  font-size: 28rpx;
  color: var(--text-light);
  line-height: 1.6;
  text-indent: 0;
}

.agree-section {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  padding: 32rpx;
  border-top: 2rpx solid var(--border-color);
  padding-bottom: calc(32rpx + env(safe-area-inset-bottom));
}

.agree-checkbox {
  display: flex;
  align-items: center;
  margin-bottom: 24rpx;
}

.checkbox-icon {
  width: 40rpx;
  height: 40rpx;
  border: 2rpx solid var(--border-color);
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16rpx;
  font-size: 24rpx;
  color: white;
  transition: all 0.3s ease;
  
  &.checked {
    background: var(--primary-color);
    border-color: var(--primary-color);
  }
}

.checkbox-text {
  font-size: 28rpx;
  color: var(--text-color);
}

.agree-btn {
  width: 100%;
  font-size: 36rpx;
  
  &:disabled {
    background: var(--text-lighter);
    color: white;
  }
}
</style>
